<template>
  <div class="layout" id="backend">
    <!-- 后台页面入口 2018/2/25 10:34 zhangQ -->
    <Layout :style="{height:layoutHeight+'px'}" style="overflow: auto" id="firstLayout">
      <Header style="backgroundColor:#0aa1b9;height: 55px;padding: 0 0px;">
        <router-link :to="{path: '/'}" class="layout-logo"></router-link>
        <Icon @click.native="collapsedSider" :style="{margin: '20px 20px 0'}" type="navicon-round"
              size="24"></Icon>
      </Header>
      <Layout>
        <Sider ref="backEndSider" hide-trigger collapsible :collapsed-width="5" v-model="isCollapsed"
               style="padding-top:45px;overflow: auto;" id="siderBar">
          <sidebarMenu :isCollapsed="isCollapsed"></sidebarMenu>
        </Sider>
        <Content>
          <div>
            <Breadcrumb :style="{padding: '12px', background: '#fff'}" ref="contentBreadcrumb">
              <template v-for="(item, index) in breadcrumbArray">
                <BreadcrumbItem>{{ item }}</BreadcrumbItem>
              </template>
            </Breadcrumb>
          </div>
          <router-view :style="{padding: '12px', minHeight: (layoutHeight-115)+'px'}"></router-view>
        </Content>
      </Layout>
    </Layout>
  </div>
</template>
<script>
  import sidebarMenu from './sidebarMenu.vue'
  import hw from '@components/common/heightAndWidth'

  export default {
    name: 'index',
    data () {
      let layIMShow = false
      let layimConfig = {}
      let layoutHeight = 600
      let isCollapsed = false
      let breadcrumbArray = []
      let datas = {layoutHeight, isCollapsed, breadcrumbArray, layIMShow, layimConfig}
      return datas
    },
    methods: {
      collapsedSider () {
        this.$refs.backEndSider.toggleCollapse()
      },
      /**
       * TODO(面包屑导航)
       * @auther zhangQ
       * @date 2018/3/15 18:01
       **/
      breadcrumbChange () {
        this.breadcrumbArray = []
        let matchedCone = this.$route.matched
        for (let i = 0, leni = matchedCone.length; i < leni; i++) {
          if (matchedCone[i].meta && matchedCone[i].meta.parentMenu) {
            this.breadcrumbArray.push(matchedCone[i].meta.parentMenu.title)
          }
          if (matchedCone[i].meta && matchedCone[i].meta.title) {
            this.breadcrumbArray.push(matchedCone[i].meta.title)
          } else {
            this.breadcrumbArray.push(matchedCone[i].name)
          }
        }
      }
    },
    watch: {
      $route (to, from) {
        this.breadcrumbChange()
      }
    },
    mounted () {
      hw.setFullHeightAllWith('firstLayout', 2, (height) => {
        this.layoutHeight = height
      })
      this.breadcrumbChange()
    },
    computed: {
    },
    components: {sidebarMenu: sidebarMenu}
  }
</script>
<style scoped>
  .layout {
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
  }

  .layout-logo {
    /*width: 140px;*/
    /*height: 30px;*/
    /*background: #ffffff;*/
    float: left;
    position: relative;
    display: inline-block;
    width: 200px;
    height: 55px;
    /*left: 20px;*/
    padding: .5rem 1rem;
    margin-right: 0;
    background-image: url('../../assets/logo.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 150px auto;
    background-color: #495060;
  }

  .layout-header-bar {
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
  }

  .layout-logo-left {
    width: 90%;
    height: 30px;
    background: #5b6270;
    border-radius: 3px;
    margin: 15px auto;
  }

  .menu-icon {
    color: #ffffff;
    transition: all .3s;
  }

  .rotate-icon {
    transform: rotate(-90deg);
  }

  .badge-chatboxes {
    float: right;
    margin: 15px 15px 0;
    color: #ffffff;
  }

</style>
<style>
  #backend .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item-active {
    color: #0aa1b9;
    border-right: 2px solid #0aa1b9;
    background-color: #363E4F !important;
  }
</style>
